<template>
	<view>
		<uni-fab 
		ref="fab"
		:pattern="pattern"
		:content="content"
		:horizontal="horizontal"
		:vertical="vertical"
		:direction="direction"
		@trigger="trigger"
		@fabClick="fabClick"></uni-fab>
	</view>
</template>

<script>
	export default {
		name:'fabButton',
		components: {},
		data() {
			return {
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				content: [
					{
						iconPath: '/static/images/lazyService-icon/人事申请.png',
						selectedIconPath: '/static/images/lazyService-icon/人事申请.png',  //选中后图片路径
						text: '申请接单',
						active: false
					},
					{
						iconPath: '/static/images/lazyService-icon/统计.png',
						selectedIconPath: '/static/images/lazyService-icon/统计.png',
						text: '使用统计',
						active: false
					},
					{
						iconPath: '/static/images/lazyService-icon/添加计划.png',
						selectedIconPath: '/static/images/lazyService-icon/添加计划.png',
						text: '发布需求',
						active: false,
						url:'/subpkg_lazyService/publicOrder/publicOrder'
					},
				]
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close()
				return true
			}
			return false
		},
		methods: {
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				let that = this
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							that.content[e.index].active = !that.content[e.index].active
							uni.navigateTo({
								url: that.content[e.index].url,
								events: {
									acceptDataFromOpenedPage: function(data) {
										console.log(data)
									},									
								}
							})
							
						} else if (res.cancel) {
							console.log('用户点击取消')
							that.content[e.index].active = !that.content[e.index].active
						}
					}
				})
			},
			fabClick() {
				uni.showToast({
					title: '点击了悬浮按钮',
					icon: 'none'
				})
			},
		}
	}
</script>

<style lang="scss">
	
</style>
